<template>
  <Modal
    :mask-closable="false"
    v-model="showConsumption"
    @on-visible-change="
      (e) => {
        !e && $emit('closeConsumption', false);
      }
    "
    :width="885"
    title="投流消费"
    :footer-hide="true"
    :draggable="true"
  >
    <Row>
      <Col span="15">
        <Form>
          <FormItem label="日期">
            <DatePicker
              v-model="params.date"
              type="daterange"
              :options="options"
              placeholder="日期选择"
              @on-change="searchData"
            />
          </FormItem>
        </Form>
        <Table
          :max-height="400"
          :columns="columns"
          :data="list"
          :loading="loading"
        >
        <template #action="{row}">
            <a @click="handleDel(row.id)" class="del" v-hasC="{
                name: 'v1-buss-accounts-delete-consume',
                flag: 'v1/buss/accounts/delete-consume',
            }">删除</a>
        </template>
        </Table>
        <Page
          class="ivu-mt-16"
          :total="total"
          :modelValue="params.current"
          :page-size="params.size"
          :page-size-opts="pageOpts"
          show-total
          show-sizer
          @on-change="changePage"
          @on-page-size-change="changepageSize"
        />
      </Col>
      <Col span="1" class="ivu-text-center">
        <Divider type="vertical" style="height: 100%" />
      </Col>
      <Col span="8">
        <Form ref="consumption" :model="formInfo" :rules="rules" :label-width="60">          

          <FormItem label="日期" prop="date_time" required>
            <DatePicker
              v-model="formInfo.date_time"
              :options="options"
              type="date"
              placeholder="日期选择"
              style="width: 100%"
            />
          </FormItem>

          <FormItem label="金额" prop="money" required>
            <InputNumber
              v-model="formInfo.money"
              placeholder="请输入金额"
              style="width: 100%"
            />
          </FormItem>

          <FormItem label="备注" prop="remark">
            <Input
              v-model="formInfo.remark"
              type="textarea"
              :rows="6"
              placeholder="请输入备注"
              :maxlength="50"
            />
          </FormItem>
          <FormItem label="">
            <Button
              type="primary"
              @click="handleAdd"
              :loading="btnLoading"
              v-hasC="{
                name: 'v1-buss-accounts-create-consume',
                flag: 'v1/buss/accounts/create-consume',
              }"
              >保存</Button
            >
          </FormItem>
        </Form>
      </Col>
    </Row>
  </Modal>
</template>  
<script>
import dayjs from "dayjs";
import { consumeList, consumeCreate, consumeDel} from "@api/accountnumber.js";
export default {
  name: "consumption",
  props: ["showConsumption", "id"],
  data() {
    return {
      loading: false,
      btnLoading: false,
      columns: [
        {
          key: "date_time_str",
          title: "日期",
          width:110
        },
        {
          key: "money",
          title: "消费金额",
          width:100
        },
        {
          key: "remark",
          title: "备注",
          ellipsis:"true",
          tooltip:"true",
          width:140
        },
        {
          key: "operation_name",
          title: "操作人",
          width:100
        },                                      
        {
            slot:'action',
            title:'操作',
            width:80
        }
      ],
      list: [],
      total: 0,
      pageOpts: [10, 20, 30, 40],
      params: {
        id: this.id,
        date: [],
        current: 1,
        size: 10,
      },
      formInfo: {
        account_id: this.id,
        remark: "",
        date_time: "",
        money: null,
      },
      rules: {
        date_time: [{ required: true, message: "请选择日期" }],
        money: [{ required: true, message: "请输入金额" }],
      },
      options: {
        disabledDate(date) {
          return date && date.valueOf() > Date.now();
        },
      },
    };
  },
  watch: {
    showConsumption() {
      if (this.showConsumption) {
        this.$refs.consumption.resetFields();
        this.params.date = [];
        this.params.current = 1;
        this.params.size = 10;
        this.params.id = this.id;
        this.formInfo.account_id = this.id;
        this.getData();
        this.formInfo.date_time = this.$Date().format("YYYY-MM-DD");
      }
    },
  },
  methods: {
    //切换page
    changePage(index) {
      this.params.current = index;
      this.getData();
    },
    changepageSize(val) {
      this.params.size = val;
      this.getData();
    },
    searchData() {
      this.params.current = 1;
      this.getData();
    },
    handleDel(index) {
        this.$Modal.confirm(
            {
                title:'删除提示',
                content:'是否确认删除此条记录，删除后不可恢复',
                onOk:()=> {
                    consumeDel({consume_id:index}).then(()=>{
                        this.$Message.success('删除成功')
                        this.getData()
                    }).catch(()=>{
                        
                    })
                    
                }
            }
        )
    },
    handleAdd() {
      this.$refs.consumption.validate(valid => {
        if(valid) {
          this.btnLoading = true;
          consumeCreate(this.formInfo)
          .then(() => {
            this.btnLoading = false;
            this.getData();
            this.$refs.consumption.resetFields();
          })
          .catch(() => {
            this.btnLoading = false;
          });
        }
      })
      
    },
    getData() {
      this.loading = true;
      let params = {
        id: this.params.id,
        date_stime: this.params.date[0]
          ? dayjs(this.params.date[0]).format("YYYY-MM-DD")
          : "",
        date_etime: this.params.date[1]
          ? dayjs(this.params.date[1]).format("YYYY-MM-DD")
          : "",
        page: this.params.current,
        pageSize: this.params.size,
      };
      consumeList(params)
        .then((res) => {
          this.list = res.list;
          this.total = res.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
  },
};
</script>